<template>
    <el-row class="row">
        <i class="icon zbs-plus-circle" @click="addCol(0)"></i>
        <el-col v-for="(item,index) in modelValue" :key="index" class="col">
            <el-input-number @change="inputChange" v-model="item.span"></el-input-number>
            <i class="icon zbs-plus-circle" @click="addCol(index)"></i>
            <i class="icon zbs-cross-circle" @click="removeCol(index)"></i>
        </el-col>
    </el-row>
</template>
<script setup>
import {defineProps,defineEmits} from 'vue'
const emit = defineEmits(["update:modelValue"]);
const prop = defineProps({
    modelValue: {
    type: String,
    default: [],
  },
})
const inputChange = () => {
    emit("update:modelValue",prop.modelValue)
}
const addCol = (index) => {
    prop.modelValue.splice(index+1,0,{span:6,children:[]})
    emit("update:modelValue",prop.modelValue)
}
const removeCol = (index) => {
    prop.modelValue.splice(index,1)
    emit("update:modelValue",prop.modelValue)
}
</script>
<style scoped>
.row{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.col{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>